<template>
	<view class="address_list pages">
		<view class="no_data" v-if="addressList.length==0">
			<u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png"
				:text="$t('option.addressList.Text')"></u-empty>
			<view class="add_address" @tap="addNew">
				{{$t('option.addressList.Add')}}
			</view>
		</view>
		<view class="container" v-else>
			<view class="address_item" v-for="item in addressList" :key="item.id">
				<view class="address_content">
					<view class="address_img" @click="toConfirm(item.id)">{{item.name.slice(0,1)}}</view>
					<view class="address_info" @click="toConfirm(item.id)">
						<view class="name">
							<text>{{item.name}}</text>
							<text>{{item.phone}}</text>
							<!-- <uni-icons type="eye-slash" color="#888" size="20"></uni-icons>
							<uni-icons type="eye" color="#888" size="20"></uni-icons> -->
						</view>
						<view class="address">
							{{item.province}}{{item.city}}{{item.area}}{{item.street}}{{item.address}}
						</view>
					</view>
					<view class="address_modify" @tap="modify(item.id)">
						<uni-icons type="compose" color="#8b8898" size="20"></uni-icons>
					</view>
				</view>
				<view class="address_btn">
					<view class="default" @tap="choseDefault(item)" :class="item.is_default==1?'default_add':''">
						<view class="default_box">
							<uni-icons type="checkmarkempty" color="#fff" size="12"></uni-icons>
						</view>
						<view>{{item.is_default==1?$t('option.addressList.noAdd'):$t('option.addressList.moAdd')}}
						</view>
					</view>
					<view class="remove" @tap="delAdd(item)">
						{{$t('option.addressList.Del')}}
					</view>
				</view>
			</view>
			<view class="add_new" @tap="addNew">
				{{$t('option.addressList.addNew')}}
			</view>
			<uni-transition mode-class="fade" :show="delShow" class="mask" :duration="200">
				<view class="mask_container">
					<view class="mask_title">
						{{$t('option.addressList.sureDel')}}
					</view>
					<view class="mask_btn">
						<view class="cancel" @tap="delShow=false">
							{{$t('option.addressList.Cancel')}}
						</view>
						<view class="confirm" @tap="userAddressDel">
							{{$t('option.addressList.Sure')}}
						</view>
					</view>
				</view>
			</uni-transition>
		</view>
	</view>
</template>

<script>
	import {
		userAddressList,
		userAddressDefault,
		userAddressDel
	} from '@/api/api.js'
	export default {
		data() {
			return {
				addressList: [],
				delId: null,
				delShow: false,
				page: 1
			}
		},
		onReachBottom() {
			this.page++
			this.userAddressList()
		},
		onShow() {
			this.page = 1,
				this.addressList = [],
				this.userAddressList(),
				uni.setNavigationBarTitle({
					title: this.$t('list.Address')
				})
		},
		methods: {
			toConfirm(id) {
				let pages = getCurrentPages(); //获取所有页面栈实例列表
				let prevPage = pages[pages.length - 2]; //上一页页面实例
				prevPage.$vm.info.addrid = id;
				uni.navigateBack({
					delta: 1
				})
			},
			// 收货地址列表
			userAddressList() {
				userAddressList({
					token: uni.getStorageSync('token'),
					page: this.page
				}).then(res => {
					if (res.data.data.data.length > 0) {
						this.addressList = [...this.addressList, ...res.data.data.data]
					} else {
						this.page--;
						uni.showToast({
							title: this.$t('option.addressList.None'),
							icon: "none"
						})
					}
				})
			},
			// 设为默认
			choseDefault(item) {
				item.is_default = 1
				userAddressDefault({
					token: uni.getStorageSync('token'),
					id: item.id
				}).then(res => {
					uni.showToast({
						title: res.data.msg,
						icon: "none"
					})
					setTimeout(() => {
						this.page = 1
						this.addressList = []
						this.userAddressList()
					}, 100)
				})
			},
			// 删除地址
			userAddressDel() {
				this.delShow = false
				userAddressDel({
					token: uni.getStorageSync('token'),
					id: this.delId
				}).then(res => {
					uni.showToast({
						title: res.data.msg,
						icon: "none"
					})
					setTimeout(() => {
						this.page = 1
						this.addressList = []
						this.userAddressList()
					}, 100)
				})
			},
			delAdd(item) {
				this.delId = item.id
				this.delShow = true
			},
			addNew() {
				uni.navigateTo({
					url: "/pages/shop/option/address/address"
				})
			},
			modify(key) {
				uni.navigateTo({
					url: "/pages/shop/option/address/address?id=" + key
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.address_list {
		width: 100%;
		height: 100%;

		.no_data {
			position: relative;

			.add_address {
				position: absolute;
				left: 50%;
				transform: translate(-50%, 20rpx);
				color: #666;
				width: 200rpx;
				height: 80rpx;
				border: 2rpx solid #c7c7d7;
				border-radius: 8rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 28rpx;
			}
		}

		.container {
			width: 100%;
			// height: 100%;
			padding: 0 0 60rpx;
			background-image: none;

			.address_item {
				width: 100%;
				height: 100%;
				padding: 40rpx 40rpx 0;

				.address_img {
					width: 80rpx;
					height: 80rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					color: #7f7f8e;
					font-size: 28rpx;
					background-color: #f5f5f9;
					border-radius: 50%;
					overflow: hidden;
					margin-right: 20rpx;
				}

				.address_content {
					width: 100%;
					height: 120rpx;
					padding: 10rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					border-bottom: 2rpx solid #f4f4f7;

					.address_info {
						flex: 1;
						overflow: hidden;

						.name {
							font-size: 28rpx;
							line-height: 28rpx;

							uni-text:first-child {
								font-weight: 600;
							}

							uni-text:nth-child(2) {
								padding: 0 20rpx;
							}
						}

						.address {
							margin-top: 20rpx;
							font-size: 28rpx;
							line-height: 28rpx;
							color: #1a1b20;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}
					}

					.address_modify {
						width: 60rpx;
						height: 60rpx;
						display: flex;
						justify-content: flex-end;
						align-items: center;
						border-left: 2rpx solid #ebebf0;
					}
				}

				.address_btn {
					height: 60rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 26rpx;
					color: #bbb;
					line-height: 26rpx;
					padding: 10rpx;

					.default {
						display: flex;
						align-items: center;

						.default_box {
							width: 32rpx;
							height: 32rpx;
							display: flex;
							justify-content: center;
							align-items: center;
							border-radius: 50%;
							border: 2rpx solid #dedede;
							margin-right: 14rpx;
						}

						&.default_add {
							.default_box {
								border-color: #01c2c3;
								background: #01c2c3;
							}

						}
					}
				}
			}

			.add_new {
				margin: 60rpx 20rpx 0;
				height: 100rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 32rpx;
				color: #fff;
				background: #01c2c3;
				border-radius: 10rpx;
			}
		}

		.mask {
			position: fixed;
			left: 0;
			bottom: 0;
			right: 0;
			top: 0;
			background: rgba(0, 0, 0, 0.6);
			z-index: 999;

			.mask_container {
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				width: 640rpx;
				height: 240rpx;
				background: #fff;
				border-radius: 12rpx;
				box-shadow: 10rpx 10rpx 20rpx 0 rgba(0, 0, 0, 0.5);
				padding: 50rpx 70rpx 50rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.mask_title {
					font-size: 32rpx;
					color: #666;
				}

				.mask_btn {
					display: flex;
					justify-content: flex-end;
					color: #01c2c3;
					font-size: 30rpx;
					line-height: 32rpx;

					.cancel {
						margin-right: 90rpx;
					}
				}
			}
		}
	}
</style>